<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/common-header :: common_header(~{::title},~{::link})">
    <title>单据查询</title>
</head>
<body class="gray-bg">
<body>

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>单据列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col">
                            <div id="pzList_table_toolbar">
                                <form role="form" id="pzList_form">
                                    <div class="form-group row">
                                        <div class="col-3">
                                            <label for="pzList_ap" class="sr-only">会计期间</label>
                                            <select class="form-control" id="pzList_ap">
                                            </select>
                                        </div>
                                        <div class="col-3">
                                            <label for="pzList_applyType" class="sr-only">单据类型</label>
                                            <select class="form-control" id="pzList_applyType">
                                                <option value="spending">请示单</option>
                                                <option value="expense">报销单</option>
                                                <option value="repay">还款单</option>
                                            </select>
                                        </div>
                                        <div class="col-3 onlyMe" style="display: none">
                                            <div class="i-checks"><label> <input type="checkbox" value="1"> <i></i> 只看自己 </label></div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-3">
                                            <label for="pzList_moneyStart" class="sr-only">金额范图</label>
                                            <div class="input-daterange input-group">
                                                <input type="number" class="form-control"
                                                       id="pzList_moneyStart"
                                                       placeholder="最小金额">
                                                <span class="input-group-addon">至</span>
                                                <input type="number" class="form-control" id="pzList_moneyEnd"
                                                       placeholder="最大金额">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <label for="pzList_applyDateStart" class="sr-only">时期范图</label>
                                            <div class="input-daterange input-group datepicker">
                                                <input type="text" class="form-control"
                                                       id="pzList_applyDateStart"
                                                       placeholder="开始日期">
                                                <span class="input-group-addon">至</span>
                                                <input type="text" class="form-control" id="pzList_applyDateEnd"
                                                       placeholder="结束日期">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <label for="pzList_key" class="sr-only">查询参数</label>
                                            <input type="text" class="form-control" id="pzList_key"
                                                   placeholder="单据编号/标题/申请人/经办人/部门">
                                        </div>
                                        <div class="col-3">
                                            <button class="btn btn-primary" type="button"
                                                    onclick="pzListObj.refreshTable()">查询
                                            </button>
                                            <button class="btn btn-white" type="button"
                                                    onclick="pzListObj.resetTable()">重置
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <table id="pzList_table" class="table table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="include/common-js :: common_js"></div>
<!--弹窗：单据信息-->
<div th:replace="web/pz/query/pzDetail::pzDetail"></div>
<script type="text/javascript">
    $().ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $('.i-checks').on('ifChecked', function (event) {
            onlyMe = true;
            pzListObj.refreshTable();
        });
        $('.i-checks').on('ifUnchecked', function (event) {
            onlyMe = false;
            pzListObj.refreshTable();
        });
        $('#pzList_ap').change(function (e) {
            pzListObj.refreshTable();
        })
        $('#pzList_applyType').change(function (e) {
            pzListObj.refreshTable();
        })
        $('.datepicker').datetimepicker({
            format: 'YYYYMMDD'
        });
        // 查询起始年度、是否可查询全部单据
        $.myGet({
            url: `/pz/cur/pzmain/canViewAll`,
            success: function (data) {
                if (data && data.code === 0) {
                    let initYear = data.initYear;
                    let lastYear = new Date().getFullYear();
                    for (let i = lastYear; i >= initYear; i--) {
                        $('#pzList_ap').append($(`<option value="${i}">${i}年</option>`));
                    }
                    // $(`#pzList_ap[value=${lastYear}]`).select();
                    pzList_onlyMe(data.pzViewAll);
                } else {
                    toastr.error(data.msg, '操作失败')
                }
            }
        })
        pzListObj.initTable();
        pzListObj.refreshTable();
    })
    let onlyMe = true;
    var pzListObj = new Object({
        myTable: $('#pzList_table'),
        resetTable: function () {
            $('#pzList_form')[0].reset();
            $('#pzList_table').bootstrapTable("refresh");
        },
        refreshTable: function(){
            let applyType = $('#pzList_applyType').val();
            this.myTable.bootstrapTable('refresh',{
                url: `/pz/cur/pzmain/list/${applyType}`
            })
        },
        initTable: function () {
            this.myTable.bootstrapTable({
                pagination: true,
                sidePagination: 'server',
                toolbar: "pzList_table_toolbar",
                method: "post",
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                queryParams: function (param) {
                    param.ap = $('#pzList_ap').val();
                    param.key = $('#pzList_key').val();
                    if($('#pzList_moneyStart').val() != ""){
                        param.moneyStart = $('#pzList_moneyStart').val();
                    }
                    if($('#pzList_moneyEnd').val() != ""){
                        param.moneyEnd = $('#pzList_moneyEnd').val();
                    }
                    if ($('#pzList_applyDateStart').val() != "") {
                        param.applyDateStart = $('#pzList_applyDateStart').val();
                    }
                    if ($('#pzList_applyDateEnd').val() != "") {
                        param.applyDateEnd = $('#pzList_applyDateEnd').val();
                    }
                    param.onlyMe = onlyMe;
                    return param;
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '单据号',
                    field: 'applyCode',
                    width: 100,
                }, {
                    title: '标题',
                    field: 'title'
                }, {
                    title: '经办人',
                    field: 'agentUsers'
                }, {
                    title: '申请人',
                    field: 'applyUserName'
                }, {
                    title: '申请部门',
                    field: 'applyDeptName'
                }, {
                    title: '申请日期',
                    field: 'applyDate'
                }, {
                    title: '金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        let num = parseFloat(value).toFixed(2);
                        num = parseFloat(num)
                        num = num.toLocaleString();
                        return `¥ ${num}`;
                    }
                }, {
                    title: '经费类型',
                    field: 'spendingType',
                    formatter: function (value, row, index) {
                        let str = "";
                        switch (value) {
                            case 1:
                                str = "一般";
                                break;
                            case 2:
                                str = "出差";
                                break;
                            case 3:
                                str = "专家";
                                break;
                            case 4:
                                str = "补登";
                                break;
                            case 5:
                                str = "提现";
                                break;
                            default:
                                break
                        }
                        return str;
                    }
                }, {
                    title: '状态',
                    field: 'state',
                    formatter: function (value, row, index) {
                        let str = "";
                        switch (value) {
                            case 1:
                                str = `<span class="badge">填写申请单</span>`;
                                break;
                            case 2:
                                str = `<span class="badge">审批中</span>`;
                                break;
                            case 3:
                                str = `<span class="badge">已完成</span>`;
                                break;
                            case 4:
                                str = `<span class="badge">作废</span>`;
                                break;
                            default:
                                break
                        }
                        if (row.isExpense) {
                            str += `<span class="badge badge-primary">已报销</span>`;
                        }
                        if (row.isExistApply) {
                            str += `<span class="badge badge-info">有请示</span>`;
                        }
                        return str;
                    }
                }, {
                    title: '打印',
                    align: 'center',
                    width: 50,
                    events: pzList_operateEvents,
                    formatter: pzList_operateFormatter
                }],
                responseHandler: function (res) {
                    return {
                        total: res.page.totalCount,
                        rows: res.page.list
                    };
                },
                onDblClickRow: function (row, $element, field) {
                    // window.open(`/web/pz/query/pzDetail?mainId=${row.id}`)
                    pzDetailObj.init(row.id, row.applyCode, row.applyType, row.spendingType);
                }
            });
        }
    })

    window.pzList_operateEvents = {
        'click .print': function (e, value, row, index) {

        }
    };

    function pzList_operateFormatter(value, row, index) {
        var opers = [];
        if (row.state == 3) {
            opers.push(`<a class="print text-success" title="打印" target="_blank" href="/web/pz/his/pzmain/printTicket?mainId=${row.id}">
                        <i class="fa fa-print"></i>
                    </a>`)
        }
        return opers.join('');
    }

    function pzList_onlyMe(show) {
        if (show) {
            // 显示组件，组件为选中状态
            $('.onlyMe').show();
            $(`input:checkbox[value=1]`).iCheck('check');
        } else {
            // 隐藏组件
            $('.onlyMe').hide();
        }
    }
</script>
</body>
</html>